<template>
  <div class="edit-shop-market-wrap">
    <div class="header flex-c">
      <p class="title">站点信息</p>
      <a-button size="mini" style="margin-right: 20px" @click="reset">重置</a-button>
      <a-button type="primary" size="mini" @click="saveShop" :loading="summitLoading">保存</a-button>
    </div>
    <div style="padding: 0 75px 0 50px">
      <a-table class="table-singe-line" size="mini" :columns="tableColumns" :pagination="false" :bordered="false" :data="marketList" style="margin-top: 20px">
        <template #marketplaceId="{ record }">
          <p>{{ record.marketplaceName }}({{ record.marketplaceCode }})</p>
        </template>
        <template #shopClerks="{ record }">
          <a-select v-model="record.shopClerks" multiple allow-clear style="width: 300px">
            <a-option v-for="(item, index) in userList" :key="index" :value="item.id" :label="item.userName" />
          </a-select>
        </template>
        <template #status="{ record }">
          <a-switch v-model="record.status" :checked-value="1" :unchecked-value="0">
            <template #checked> 开 </template>
            <template #unchecked> 关 </template>
          </a-switch>
        </template>
        <template #baseAuthMap="{ record }">
          <div class="flex-c" style="width: 180px">
            <p :class="{ warningColor: record.status == -1 }" style="margin-right: 10px">{{ baseAuthMap[record.cpcAuth] }}</p>
            <p v-if="record.cpcAuth == 1">{{ $setTime(record.gmtCpcAuth) }}</p>
            <CopyText v-else :val="adAuthUrlMap[record.marketplaceId]">
              <template #copyCon>
                <p class="highlight cursor">复制链接去授权</p>
              </template>
            </CopyText>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { updateShopMarkets, getShopInfo, getAmazonAdAuthUrl } from '@/api/system'
  import { Message } from '@arco-design/web-vue'
  const props = defineProps({
    currentData: {
      type: Array,
      default: () => [],
    },
    userList: {
      type: Array,
      default: () => [],
    },
    shopId: {
      type: String,
    },
  })
  onMounted(async () => {
    setMarketList(props.currentData)
    getAdAuthUrl()
  })
  const tableColumns: Array<any> = [
    {
      title: '站点',
      dataIndex: 'marketplaceId',
      slotName: 'marketplaceId',
    },
    {
      title: '币种',
      dataIndex: 'currency',
      slotName: 'currency',
    },
    {
      title: '店员',
      dataIndex: 'shopClerks',
      slotName: 'shopClerks',
    },
    {
      title: '状态',
      dataIndex: 'status',
      slotName: 'status',
    },
    {
      title: '广告授权',
      dataIndex: 'baseAuthMap',
      slotName: 'baseAuthMap',
    },
  ]
  const marketList = ref<Array<any>>([])
  let defaultInfo: any = JSON.parse(JSON.stringify(props.currentData))
  const adAuthUrlMap = ref<any>({})
  const summitLoading = ref(false)
  const baseAuthMap = {
    '0': '未授权',
    '1': '已授权',
    '-1': '授权异常',
  }

  function setMarketList(currentData: any) {
    marketList.value = JSON.parse(JSON.stringify(currentData))
    marketList.value.forEach((el: any) => {
      el.shopClerks = el.shopClerks.map((item: any) => item.userId)
    })
  }
  // 获取所有站点的广告授权地址
  async function getAdAuthUrl() {
    let ids = marketList.value.map((el) => el.marketplaceId)
    const res: any = await getAmazonAdAuthUrl({ marketplaceIds: ids?.join(',') })
    adAuthUrlMap.value = res?.data || {}
  }

  // 获取店铺详情
  async function getShopDetail() {
    const res: any = await getShopInfo({
      id: props.shopId,
    })
    defaultInfo = res?.data?.shopMarkets || {}
    setMarketList(defaultInfo)
  }
  // 重置信息
  function reset() {
    setMarketList(defaultInfo)
  }
  // 提交店铺信息
  async function saveShop() {
    let shopMarketItems = marketList.value.map((el) => {
      return {
        id: el.id,
        shopClerkIds: el.shopClerks,
        status: el.status,
        clerkType: 2,
      }
    })
    summitLoading.value = true
    const res: any = await updateShopMarkets({ shopMarketItems: shopMarketItems })
    summitLoading.value = false
    if (res) {
      Message.success('保存成功！')
      getShopDetail()
    }
  }
</script>
<style lang="less" scoped>
  .header {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
    border-left: 3px solid rgba(var(--primary-6), 0.5);
    padding-left: 10px;
    .title {
      margin-right: 30px;
      width: 90px;
    }
  }
  .arco-typography {
    margin-bottom: 0;
  }
</style>
